<template>
  <div class="main-container">
    <div class="mb-15"><b style="font-size: 20px">功能演示</b></div>
    <!-- 消息 -->
    <div class="demo-btn">
      <div class="flex-box-center mb-15" @click="showMessageBox()">
        <el-badge
          :value="unread"
          :max="99"
          :hidden="unread ? false : true"
          class="item"
        >
          <el-button>窗口模式</el-button>
        </el-badge>
      </div>
      <div class="mb-15 mr-15" @click="$router.push({ path: '/chat' })">
        <el-button>纯享模式</el-button>
      </div>
      <div class="mb-15 mr-15" @click="$router.push({ path: '/manage/index' })">
        <el-button>管理后台</el-button>
      </div>
      <div class="mb-15 mr-15">
        <el-tooltip placement="right-start" effect="light">
          <div slot="content">
            <el-image
              style="width: 200px"
              src="https://emoji.raingad.com/file/h5.png"
            ></el-image>
          </div>
          <el-button
            ><a :href="$packageData.mobileUrl" target="_blank"
              >H5体验</a
            ></el-button
          >
        </el-tooltip>
      </div>
      <div class="mb-15 mr-15">
        <el-tooltip placement="right-start" effect="light">
          <div slot="content">
            <el-image
              style="width: 200px"
              src="https://emoji.raingad.com/file/app.png"
            ></el-image>
          </div>
          <el-button
            ><a
              href="https://emoji.raingad.com/file/raingad.apk"
              target="_blank"
              >安卓APP体验</a
            ></el-button
          >
        </el-tooltip>
      </div>
    </div>

    <div class="contact-main">
      <div class="title">
        <b style="font-size: 20px">联系人</b>（仅展示部分用于演示）
      </div>
      <div
        class="contact-box"
        v-for="x in allContacts"
        :key="x.id"
        v-if="x.is_group == 0 && x.id < 6"
      >
        <div class="contact-item">
          <el-avatar :src="x.avatar"></el-avatar>
          <span>{{ x.realname }}</span>
          <div>
            <!-- 假如在业务中很多地方都有展示人员，我们可以全局调用打开聊天窗口 -->
            <el-button
              plain
              size="mini"
              round
              @click="$store.commit('openChat', x.id)"
              >发消息</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <Message
      ref="Message"
      :dialogTableVisible.sync="dialogTableVisible"
    ></Message>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
import Message from "@/views/message/Index"; //临时位置
export default {
  name: "Index",
  components: {
    Message,
  },
  data() {
    return {
      dialogTableVisible: false, //消息弹窗是否显示
      unread: 0,
      allContacts: [],
      activeName: "0",
    };
  },
  computed: {
    ...mapState({
      chatSocket: (state) => state.unread,
      getContacts: (state) => state.allContacts,
    }),
  },
  watch: {
    chatSocket(val) {
      this.unread = val;
    },
    // 全局获取联系人，在实际的业务场景中，在任何地方都可能会有人员点击，可以直接发送消息
    getContacts(val) {
      this.allContacts = val;
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    showMessageBox() {
      this.dialogTableVisible
        ? (this.dialogTableVisible = false)
        : (this.dialogTableVisible = true);
    },
    scrollTo() {
      // 滚动到底部
      window.scrollTo(0, document.body.scrollHeight);
    },
    downApp() {
      window.open(window.BASE_URL + "downapp");
    },
  },
};
</script>
<style scoped lang="scss">
.main-container {
  padding: 50px 10%;

  .im-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .logo {
      width: 80px;
      height: 80px;
      background: #eee;
      border-radius: 50%;
      margin-right: 20px;
    }

    .im-content {
      .im-name {
        font-weight: 600;
        margin-bottom: 5px;
        display: flex;
        align-items: flex-start;
      }

      .im-des {
        font-size: 18px;
        color: #999;
        margin-bottom: 10px;
      }
    }
  }

  .code-url {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    p {
      font-size: 14px;
      color: #5e6d82;
      line-height: 1.8;
    }
  }

  .danger {
    padding: 8px 16px;
    background-color: #fef0f0;
    border-radius: 4px;
    border-left: 5px solid #f56c6c;
    p {
      font-size: 14px;
      color: #5e6d82;
      line-height: 1.8;
    }
  }

  .warning {
    padding: 8px 16px;
    background-color: #fdf6ec;
    border-radius: 4px;
    border-left: 5px solid #e6a23c;
    p {
      font-size: 14px;
      color: #5e6d82;
      line-height: 1.8;
    }
  }

  .success {
    padding: 8px 16px;
    background-color: #f0f9eb;
    border-radius: 4px;
    border-left: 5px solid #67c23a;
    p {
      font-size: 14px;
      color: #5e6d82;
      line-height: 1.8;
    }
  }

  .info {
    padding: 8px 16px;
    background-color: #f4f4f5;
    border-radius: 4px;
    border-left: 5px solid #909399;
    p {
      font-size: 14px;
      color: #5e6d82;
      line-height: 1.8;
    }
  }

  .contact-main {
    .contact-box {
      .contact-item {
        width: 300px;
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;

        .el-avatar {
          margin-right: 10px;
        }

        div {
          display: flex;
          align-items: center;
          margin-left: auto;
        }
      }
    }
  }
  .demo-btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .item {
      margin-right: 20px;
    }
  }
}

@media screen and (max-width: 768px) {
  .main-container {
    padding: 15px;
  }
}
::v-deep .el-tooltip__popper {
  padding: 0 !important;
}
</style>

<style>
.el-image {
  overflow: inherit;
}
</style>
